<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form验证</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
         .box {
            width: 900px;
            height: 100%;
            margin: auto;
            margin-top:10%;
            background-color: rgb(255, 255, 255);
        }
        .gs1 td{
            font-size: 20px;
        }
        .f1 {
            margin-left: 50px;
            margin-top: 50px;
            border: 2px solid #999;
        }
        .f1 td{width: 100px;}
        .f1 tr{height: 50px;}
    </style>
</head>

<body>
    <div class="box">
    <table class="gs1">
        <form name="form1" id="for1">
            <tr><td>姓名：<input type="text" name="yhm" value="" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8-16之间"><span id="yhmid"></span></td></tr>
            <tr><td>电话：<input type="text" name="phone" value="" placeholder="11位手机号"><span id="iphone1"></span></td></tr>
            <tr><td>学历：<input type="Education" name="emai" value="" placeholder="学历"><span id="ema1"></span></td></tr>
            <tr><td>年龄：<input type="age" name="pwd" id="mima" value="" placeholder="Amount"><span id="pwdmsg"></span></td></tr>
            <tr><td>薪资：<input type="text" name="pwd1" value="" placeholder="Amount"><span id="pwd1msg"></span></td></tr>
        </form>
    </table>
    <button name="sub" onclick="tj()"><a href="">保存</a></button>
    <button><a href=".//form验证.html">重置</a></button>
    <table class="f1" style="width:800px;text-align: center;height: 100px;">
        <tr>
            <td>姓名</td>
            <td>联系电话</td>
            <td>学历</td>
            <td>年龄</td>   
            <td>期望薪资</td>
            <td><button onclick="tianjia()">保存</button></td>
            <td><input type="checkbox" id="checAll1" onchange="checAlld()">全选<br><button onclick="backsp()">删除</button></td>
            <td><button onclick="backsp()">修改</button></td>   
        </tr>
    </table>
</div>
    <script type="text/javascript">
        // 数据
        var arr = {
            username: "",
            phone: "",
            emai: "",
            pwd: ""
        }
        //用户名
        document.form1.yhm.onkeyup = function () {
            var reg = /^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,}/;
            if (reg.test(this.value) && this.value.length >= 6 && this.value.length < 12) {
                document.getElementById("yhmid").innerHTML = "下一步";
                arr.username = this.value;
            } else {
                document.getElementById("yhmid").innerHTML = "只能包含数字字母下划线,且数字不能开头,长度在8-16之间";
            }
        }
        //年龄
        document.form1.phone.onkeyup = function () {
            var reg1 =  /^[1][0-9]{3}$/;
            if (reg1.test(this.value) && this.value.length >= 3) {
                document.getElementById("pwdmsg").innerHTML = "下一步";
                arr.pwd = this.value;
            } else {
                document.getElementById("pwdmsg").innerHTML = "请输入年龄0-9数字";
            }
        }
        //确认年龄
        document.form1.pwd1.onkeyup = function () {
            if (this.value == document.form1.pwd.value) {
                document.getElementById("pwd1msg").innerHTML = "下一步";
            } else {
                document.getElementById("pwd1msg").innerHTML = "请保持一致";
            }
        }
        //手机号
        document.form1.phone.onkeyup = function () {
            var reg2 = /^[1][0-9]{10}$/;
            if (reg2.test(this.value) == true) {
                document.getElementById("iphone1").innerHTML = "下一步";
                arr.phone = this.value;
            } else {
                document.getElementById("iphone1").innerHTML = "请输入11位手机号";
            }
        }
        //学历验证
        document.form1.emai.onkeyup = function () {
            var reg3 = /^[a-zA-Z]{1}[A-Z|a-z|0-3]{3,}/;
            if (reg3.test(this.value) == true) {
                document.getElementById("ema1").innerHTML = "下一步";
                arr.emai = this.value;
            } else {
                document.getElementById("ema1").innerHTML = "请输入学历";
            }
        }
        // 封装
        function fengfun() {
            var _tr = `<tr><td>${arr.username}</td><td>${arr.phone}</td><td>${arr.emai}</td><td>${document.lastModified}</td><td><span>*******</span><span style="display:none">${arr.pwd}</span><button onclick="xsma(this)">显示薪资</button></td><td><button onclick='delete1(this)'>删除</button></td><td><input type="checkbox" name='ss'></td></tr>`
            document.getElementsByTagName('table')[1].innerHTML += _tr
        }
        // 全选
        function checAlld() {
            var s1 = document.getElementsByName('ss')
            for (var i = 0; i < s1.length; i++) {
                if (checAll1.checked == true) {
                    s1[i].checked = true
                } else {
                    s1[i].checked = false
                }
            }
        }
        // 提交
        function tj() {
            // if判断是否填写正确
            var jc = document.querySelectorAll('span')
            if (jc[0].innerHTML == "下一步" && jc[1].innerHTML == "下一步" && jc[2].innerHTML == "下一步" && jc[3].innerHTML == "下一步" &&
                jc[4].innerHTML == "下一步") {
                alert("注册成功")
                fengfun()
            } else(alert("输入信息错误"))
        }
        // 添加
        function tianjia() {
            fengfun()
        }
        // 
        // 删除
        function delete1(obj) {
            obj.parentNode.parentNode.remove()
        }
        // 显示密码
        function xsma(obj) {
            if (obj.innerHTML == '隐藏薪资') {
                obj.innerHTML = '显示薪资'
                obj.previousSibling.style.display = 'none'
                obj.previousSibling.previousSibling.style.display = 'inline-block'
            } else {
                obj.innerHTML = '隐藏薪资'
                obj.previousSibling.style.display = 'inline-block'
                obj.previousSibling.previousSibling.style.display = 'none'
            }
        }
        // 逐个选中后全选被选中
        document.getElementsByTagName('table')[1].onclick = function () {
            if (event.target.name == 'ss') {
                var s = document.getElementsByName('ss')
                var flag = true
                for (var i = 0; i < s.length; i++) {
                    if (s[i].checked == false) {
                        flag = false;
                        break;
                    }
                }
                checAll1.checked = flag
            }
        }
        // 全选删除与选中删除
        function backsp() {
            var inpchex = document.getElementsByName('ss')
            for (var i = 0; i < inpchex.length; i++) {
                if (checAll1.checked) {
                    delete1(inpchex[i])
                    i = -1
                    checAll1.checked=false
                } else
                if (inpchex[i].checked && !checAll1.checked) {
                    delete1(inpchex[i])
                    i = -1
                } else {}
            }
        }
    </script>
</body>
</html>